<template>
  <div>
    <div class="pageheader">
      <XHeader
        :left-options="{backText:''}"
        :title="xheader.title"
        :right-options="{showMore: isShowMoreBut}"
        @on-click-more="onHeaderMare"
        class="XHeader"
      ></XHeader>
    </div>
    <div class="page">
      <div class="block" style="margin-top: 12px">
        <Swiper class="swiper" :list="swipers" :showDescMask="false" auto dots-position="center"></Swiper>
        <div class="block" style=" padding:24px 16px;  background-color: #ffffff;">
          <div class="title">{{product.goods_name}}</div>
          <div v-if="product.subtitle" class="subtitle">{{product.subtitle}}</div>
          <div v-if="product.other_sku" style="font-size: 13px;color: #9f8d89;margin: 10px 0 0">商品编号: {{product.other_sku}}</div>
          <div class="pricebar">
            <div class="price">
              ￥ {{seckill.seckill_price}}
              <text class="n-price">(秒杀价)</text>
            </div>
            <div class="d-price">￥{{product.reference_price}}</div>
          </div>
          <div class="describe">
            <div style="flex:1">距离结束还剩</div>
            <div style="color:#AE2309;">
              <clocker :time="seckill.end_time*1000" :format="'%H : %M : %S'" @on-finish="onFinish"></clocker>
            </div>
          </div>
          <div class="describe">
            <div style="flex:1" class="brokerageitem">
              数量：{{goods_number}}
              <!-- <div class="quantity"> -->
              <!-- <div class="minus" @click="onMinus">-</div> -->
              <!-- <div class="num">{{goods_number}}</div> -->
              <!-- <div class="plus" @click="onPlus">+</div> -->
              <!-- </div> -->
            </div>
            <div>库存：{{product.goods_storage>0?'有货':'售罄'}}</div>
          </div>
          <!--分享类型-->
          <div class="share_link" v-if="!isSanXia">
            <div class="share_link_con" @click="share(Enum.URL_TYPE.FRIEND)"><i></i><span>分享给朋友</span></div>
            <div class="share_link_bo">|</div>
            <div class="share_link_con" @click="share(Enum.URL_TYPE.COLLEAGUE)"><i></i><span>分享给同事</span></div>
          </div>
        </div>
      </div>

      <div class="block">
        <div class="listitem" @click="onComment">
          <div class="text">
            好评率：
            <span class="redtext">{{rateAcclaim}}</span>
          </div>
          <div class="desc">查看全部评价</div>
        </div>
      </div>

      <mallinfo :tab="tab" :supplierId="supplierId"></mallinfo>

      <div class="operation">
        <!--        <img class="service" src="@/assets/img/ic_CS.png"/>-->
        <!-- <img class='shopping' src='@/assets/img/ic_shopping2.png'>
        <div class='add'>加入购物车</div>-->
        <img style="width: 34px;margin: 0 8.5px 0 20px;" class="service" src="@/assets/img/goode_detail_home.svg" @click="$router.push({name: 'mall'})"/>
        <div
          class="shop"
          @click="onSeckill"
        >{{seckill.status==0?'即将开始':seckill.status==1?'立即抢购':'已结束'}}
        </div>
      </div>
    </div>
    <actionsheet v-model="isShowMore" :menus="menus" @on-click-menu="menusFun" :show-cancel="true"></actionsheet>

    <input
      type="text"
      readonly
      class="clipBoardContent"
      id="clipBoardContent"
      v-model="clipBoardContent"
    />

    <!-- 分享指示-->
    <ShareGuide v-model="isShowShare"></ShareGuide>
  </div>
</template>

<script>
  import { share } from '@/mixin/share'
  import Mall from '@/dll/mall'
  import Util from '@/utils/util'
  // import WinXin from '@/dll/weixin'
  // import baseUrl from '../../../../baseUrl'

  export default {
    name: 'mallSeckillInfo',
    mixins: [share],
    data () {
      let isShowMoreBut = Util.isWeixn()
      let isUleeCommunityAPP = Util.isUleeCommunityAPP()
      let menus = []
      if (isUleeCommunityAPP) {
        menus = [
          { label: '分享到微信', value: 'shareAppMessage' },
          { label: '分享到朋友圈', value: 'shareTimeline' }
        ]
      } else {
        menus = [{ label: '复制连接地址', value: 'copy' }]
      }
      return {
        xheader: {
          title: '秒杀'
        },
        swipers: [],
        id: null,
        tab: [],
        tabIndex: 0,
        menus: menus,
        product: {},
        seckill: {},
        supplierId: 0,
        isShowMoreBut: !isShowMoreBut,
        isShowMore: false,
        clipBoardContent: '',
        goods_number: 1,
        link: ''
      }
    },
    created () {
      this.id = this.$route.params.id
      // this.clipBoardContent = location.href
      // this.link = baseUrl.link.SHARE + this.$route.params.id
      this.getInfo()
    },
    methods: {

      onHeaderMare () {
        this.isShowMore = true
      },

      onMinus () {
        if (this.goods_number <= 1) {
          return
        }
        this.goods_number = this.goods_number - 1
      },
      onPlus () {
        this.goods_number = this.goods_number + 1
      },
      onFinish () {
        this.getInfo()
      },

      // menusFun (key, item) {
      //   let fun = {
      //     shareAppMessage: () => {
      //       let config = {
      //         type: 1,
      //         shareTitle: this.product.goods_name,
      //         shareDescr: this.product.subtitle,
      //         shareThumbImage: this.product.goods_image_main,
      //         shareWebPageUrl: location.href
      //         // shareWebPageUrl: baseUrl.link.SHARE + this.$route.params.id
      //       }
      //       WinXin.ShareToWeiXin(config, () => {
      //       })
      //     },
      //     shareTimeline: () => {
      //       let config = {
      //         type: 2,
      //         shareTitle: this.product.goods_name,
      //         shareDescr: this.product.subtitle,
      //         shareThumbImage: this.product.goods_image_main,
      //         shareWebPageUrl: location.href
      //         // shareWebPageUrl: baseUrl.link.SHARE + this.$route.params.id
      //       }
      //       WinXin.ShareToWeiXin(config, () => {
      //       })
      //     },
      //     copy: () => {
      //       let input = document.getElementById('clipBoardContent')
      //       const range = document.createRange()
      //       range.selectNode(input)
      //       const selection = window.getSelection()
      //       if (selection.rangeCount > 0) {
      //         selection.removeAllRanges()
      //       }
      //       selection.addRange(range)
      //       // input.select();
      //       // input.setSelectionRange(0, input.value.length);
      //       let isCopy = document.execCommand('copy')
      //       if (isCopy) {
      //         this.$vux.alert.show({
      //           title: '提示',
      //           content: '连接已复制,去粘贴吧！'
      //         })
      //       } else {
      //         this.$vux.alert.show({
      //           title: '提示',
      //           content: '浏览器不支持，请手动复制。'
      //         })
      //       }
      //     }
      //   }
      //   if (fun[item.value]) {
      //     fun[item.value]()
      //   }
      // },
      async onSeckill () {
        if (this.seckill.status != 1) {
          return
        }
        let param = JSON.stringify(this.seckill)
        this.$vux.loading.show({
          text: '请稍后'
        })
        let res = await Mall.confirmSeckill(param)
        this.$vux.loading.hide()
        if (res.code == 0) {
          if (res.data.seckill_status == 1) {
            this.onClearing()
          } else if (res.data.seckill_status == 2) {
            this.$vux.alert.show({
              title: '提示',
              content: '有未完成的订单，前往查看。',
              onHide: () => {
                this.$router.replace({
                  name: 'mallOrder',
                  params: { tabIndex: 1 }
                })
              }
            })
          } else {
            this.$vux.alert.show({
              title: '提示',
              content: res.msg,
              onHide: () => {
                this.$router.back()
              }
            })
          }
        } else {
          this.$vux.alert.show({
            title: '提示',
            content: res.msg,
            onHide: () => {
              this.$router.back()
            }
          })
        }
      },
      onClearing () {
        let items = []
        let product = this.product
        product.goods_number = this.goods_number
        items.push({
          goods_sku: product.goods_sku,
          goods_number: this.goods_number
        })
        this.$router.push({
          name: 'mallClearing',
          query: {
            items: JSON.stringify(items),
            if_cart: 0,
            seckillbuy_id: this.seckill.seckill_id
          }
        })
      },
      // 获取详情
      async getInfo () {
        this.$vux.loading.show({
          text: '请稍后'
        })
        let res = await Mall.getSeckillInfo(this.id)
        this.$vux.loading.hide()
        if (res.code == 0) {
          let product = res.data.goods_info
          let tab = Util.infoTab(product)

          this.product = product
          this.xheader.title = product.goods_name
          this.seckill = res.data.effect_info
          this.supplierId = parseInt(res.data.goods_info.supplier_id)
          this.tab = tab
          this.swipers = [].concat(this.swipers, {
            url: 'javascript:',
            img: product.goods_image_main
          })
          if (Util.isWeixn()) {
            this.updateAppMessageShareData()
          }
          this.setImg()
        } else {
          this.$vux.confirm.show({
            title: '提示',
            content: res.msg,
            showCancelButton: false,
            onConfirm: () => {
              this.$router.back()
            }
          })
        }
      },
      // 获取图片
      async getImages () {
        // eslint-disable-next-line no-undef
        let res = await Product.getDiscountProductImages(this.id)
        if (res.code == 0) {
          this.swipers = [].concat(
            this.swipers,
            res.data.map(item => {
              return {
                url: 'javascript:',
                img: item
              }
            })
          )
        }
      }
      // updateAppMessageShareData () {
      //   let config = {
      //     title: this.product.goods_name,
      //     desc: this.product.subtitle,
      //     link: location.href,
      //     // link: this.link,
      //     imgUrl: this.product.goods_image_main,
      //     success: () => {
      //     }
      //   }
      //   WinXin.updateAppMessageShareData(config)
      // }
    }
  }
</script>

<style lang="less" scoped>
  .page {
    padding-bottom: 49px;
  }

  .swiper {
    height: 350px;
    background-color: #fff;
  }

  .slide-image {
    height: 350px;
  }

  .title {
    font-size: 16px;
    color: #351009;
    line-height: 22px;
  }

  .subtitle {
    font-size: 14px;
    color: #d8d0ce;
    line-height: 20px;
  }

  .pricebar {
    margin-top: 24px;
    display: flex;
    align-items: center;
  }

  .pricebar .price {
    flex: 1;
    font-size: 20px;
    color: #ae2309;
    line-height: 28px;
  }

  .pricebar .n-price {
    font-size: 12px;
  }

  .pricebar .d-price {
    font-size: 14px;
    color: #d1c8c6;
    line-height: 20px;
    text-decoration: line-through;
  }

  .coupon {
    margin-top: 8px;
    padding: 8px 0;
    display: flex;
    align-items: center;
    position: relative;
    background-color: #fff;
  }

  .coupon::before {
    content: " ";
    display: inline-block;
    height: 6px;
    width: 6px;
    border-width: 2px 2px 0 0;
    border-color: #351009;
    border-style: solid;
    -webkit-transform: matrix(0.71, 0.71, -0.71, 0.71, 0, 0);
    transform: matrix(0.71, 0.71, -0.71, 0.71, 0, 0);
    top: -2px;
    position: absolute;
    top: 50%;
    right: 0;
    margin-top: -4px;
  }

  .coupon .text {
    font-size: 12px;
    color: #9f8d89;
    line-height: 17px;
  }

  .describe {
    display: flex;
    margin-top: 8px;
    font-size: 12px;
    color: #9f8d89;
    line-height: 17px;
    align-items: center;
  }

  .listitem {
    display: flex;
    align-items: center;
    height: 48px;
    box-sizing: border-box;
    padding: 14px 16px;
    padding-right: 36px;
    position: relative;
    background-color: #fff;
  }

  .listitem::before {
    content: " ";
    display: block;
    height: 6px;
    width: 6px;
    border-width: 2px 2px 0 0;
    border-color: #351009;
    border-style: solid;
    -webkit-transform: matrix(0.71, 0.71, -0.71, 0.71, 0, 0);
    transform: matrix(0.71, 0.71, -0.71, 0.71, 0, 0);
    position: absolute;
    top: 0;
    bottom: 0;
    margin-top: auto;
    margin-bottom: auto;
    right: 0;
    margin-right: 16px;
  }

  .listitem .text {
    flex: 1;
    font-size: 15px;
    color: #9f8d89;
    line-height: 21px;
  }

  .listitem .desc {
    font-size: 15px;
    color: #351009;
    line-height: 21px;
  }

  .redtext {
    color: #ae2309;
  }

  .infotab {
    border-top: 1px solid #fbf8f7;
    box-sizing: border-box;
    width: 100%;
    display: flex;
    padding-left: 12px;
    padding-right: 12px;
    height: 45px;
    z-index: 9999;
    background-color: #fff;
  }

  .infotab > .item {
    flex: 1;
    height: 100%;
    display: block;
    line-height: 45px;
    font-size: 14px;
    color: #351009;
    text-align: center;
    position: relative;
  }

  .infotab > .item.active {
    color: #ae2309;
  }

  .infotab > .item.active::after {
    position: absolute;
    content: "";
    width: 60%;
    bottom: 0;
    left: 0;
    right: 0;
    margin: auto;
    height: 1px;
    background: #b0290f;
  }

  .operation {
    display: flex;
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    box-sizing: border-box;
    background-color: #fff;
    height: 49px;
    align-items: center;
  }

  .operation .service {
    width: 49px;
    height: 49px;
    margin-left: 12px;
    display: block;
  }

  .operation .shopping {
    width: 49px;
    height: 49px;
    display: block;
    margin-right: 12px;
  }

  .operation .add {
    flex: 1;
    font-size: 14px;
    color: #fff;
    height: 49px;
    line-height: 49px;
    text-align: center;
    background-color: #eca13e;
  }

  .operation .shop {
    flex: 1;
    font-size: 14px;
    color: #fff;
    height: 49px;
    line-height: 49px;
    text-align: center;
    background-color: #ae2309;
  }

  .brokerageitem .quantity {
    display: flex;
    flex-direction: row;
    align-items: center;
  }

  .brokerageitem .quantity .plus {
    display: block;
    width: 24px;
    height: 24px;
  }

  .brokerageitem .quantity .minus,
  .brokerageitem .quantity .plus {
    display: block;
    width: 24px;
    height: 24px;
    line-height: 22px;
    text-align: center;
    font-size: 16px;
    box-sizing: border-box;
    border: 1px solid #d4d4d4;
  }

  .brokerageitem .quantity .num {
    display: block;
    width: 40px;
    height: 24px;
    line-height: 24px;
    font-size: 18px;
    color: #ae2309;
    text-align: center;
  }
</style>
